<template>
  <van-grid :border="false"  :column-num="2">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-grid-item v-for="(item,index) in list"
                     :key="index" class="onesStyke" @click.stop="detailsPage(item)">
        <goods :product="item" ></goods>
      </van-grid-item>
    </van-list>
    <!-- 详情展示 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '100%' }" >
      <!-- 顶部 -->
      <van-sticky>
        <van-row type="flex" justify="space-between" class="search-top">
          <van-col span="6" ><van-icon name="arrow-left" class="left" @click="goBack()" size="28px"/></van-col>
          <van-col span="8"><div class="cart-text">步行街主干道</div></van-col>
          <!--分享-->
          <van-col span="6"><van-icon name="share-o" class="right" @click="showShare = true" size="28px"/></van-col>
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
          />
        </van-row>
      </van-sticky>
      <!-- 新闻内容 -->
      <div class="contensStyle">
        <div class="newInfoStyle">
          <h3>{{item.name}}</h3>
          <div class="userStyle">
            <img src="http://www.answerh.top/group1/M00/00/00/rBgDL17VDjGAECZSAAWKfYhU2Ng854.jpg">
            <div class="right">
              <p>我是个名字</p>
              <p>15:43</p>
            </div>
          </div>
          <div class="contentHtml">
            测试我就是测试
            测试我就是测试
            测试我就是测试
            测试我就是测试
            测试我就是测试
            测试我就是测试
            测试我就是测试
            测试我就是测试
            测试我就是测试
            测试我就是测试
            测试我就是测试

            测试我就是测试测试我就是测试
            测试我就是测试

          </div>
          <div class="imgs">
            <van-image
              width="100%"
              height="100%"
              src="http://www.answerh.top/group1/M00/00/00/rBgDL17VDjGAECZSAAWKfYhU2Ng854.jpg"
            />
            <van-image
              width="100%"
              height="100%"
              src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3804817754,678318586&fm=26&gp=0.jpg"
            />
          </div>
          <p>阅读 {{read}}</p>
        </div>
        <hr>
        <Details :product="item"></Details>
      </div>
    </van-popup>
  </van-grid>
</template>

<script>
  import Goods from './goods'
  import Details from './details'
  import { Toast } from 'vant';
  export default {

    data() {
      return {
        loading: false,
        finished: false,
        show: false,
        item: '',
        read:140123,
        showShare: false,
        options: [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
        ],
      }
    },
    name: "goods-list",
    props:['list'],
    components:{
      Goods,
      Details
    },
    methods: {
      onLoad() {
        console.log(22)
      },
      detailsPage(item){
        this.show = true;
        this.item = item
        console.log(item)
      },
      goBack(){
        console.log("goBack")
        this.show = false
      },
      onSelect(option) {
        Toast(option.name);
        this.showShare = false;
      },
    }
  }
</script>

<style scoped>
  .right{
    float:right;
    margin: 13px;
  }
  .left{
    float:left;
    margin: 13px;
  }
  /deep/ .van-grid-item .van-grid-item__content{
    background:#e7e7e7;
  }
  .onesStyke{

  }
  .search-top {
    background: skyblue;
    width: 100%;
    height: 50px;
  }
  .cart-text {
    text-align:center;
    color: black;
    font-size: 18px;
    line-height: 50px;
    font-weight: bold;
  }
  .zero-wrap{
    height: 10px;
    background: darkgrey;
  }
  .contensStyle{
    padding:10px;
  }
  .newInfoStyle{
    margin-bottom: 10px;
  }
  h3{
    margin: 0;
    padding: 0;
  }
  .userStyle{
    display: flex;
    margin: 15px 0;
  }
  .userStyle img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .userStyle .right{
    display: flex;
    margin: 5px 0 0 10px;
    flex-direction: column;
  }
  .userStyle p{
    margin: 0;
    font-size: 16px;
  }
  .userStyle p:last-child{
    font-size: 14px;
  }
  .contentHtml{
    margin-bottom: 10px;
  }
</style>
